<template>
    <div>
      <el-form :model="form" :rules="rules" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" autocomplete="off" placeholder="请设置用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" type="email" clearable autocomplete="off" placeholder="请设置邮箱">
            <el-select v-model="select" slot="append" placeholder="请选择">
              <el-option label="@qq.com" value="@qq.com"></el-option>
              <el-option label="@163.com" value="@163.com"></el-option>
              <el-option label="@outlook.com" value="@outlook.com"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" show-password autocomplete="off" placeholder="请设置密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button round type="danger" @click="registerEnd">立即注册</el-button>
          <el-button round type="primary" @click="backLogin">返回</el-button>
      </div>
    </div>
</template>

<script>
import { userRegister } from '@/api'
export default {
    data(){
        return {
            form:{
              username:'',
              email:'',
              password:''
            },
            select:'@qq.com',
            rules:{
              username:[
                { required: true, message: '请设置用户名', trigger: 'blur' },
              ],
              email:[
                { required: true, message: '输入不能为空', trigger: 'blur' },
              ],
              password:[
                { required: true, message: '密码不能为空', trigger: 'blur' },
              ]
            }
        }
    },
    computed:{
      dialogFormVisible(){
        return this.$store.state.dialogFormVisible
      }
    },
    methods:{
        login(){
          this.$store.commit('login', 0)
        },
        handleClose(){
          this.$store.commit('login', 0)
        },
        backLogin(){
          this.$emit('showRegister')
        },
        registerEnd() {
          const email = this.form.email + this.select;
          const password = this.form.password;
          const user_name = this.form.username;
          let fd = new FormData()
          fd.append('email', email)
          fd.append('user_name', user_name)
          fd.append('password', password)
          userRegister(fd)
          .then((res) => {
            this.$message({
              message: '注册成功',
              type: 'success'
            });
            setTimeout(() => {
              this.backLogin()
            },1000)
            console.log(res); // 假设响应包含数据
          })
          .catch((error) => {
            console.error('错误：', error);
          });
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog__header{
  text-align: center;
  padding-top: 35px;
  .el-dialog__title{
    color: red;
  }
}
.el-form-item{
  margin-bottom: 30px;
  .el-input{
    width: 90%;
    /deep/.el-select .el-input__inner{
      width: 100px;
      padding-left: 10px;
      padding-right: 20px;
    }
  }
}
/deep/.el-dialog__body{
  padding: 20px 20px 0 20px;
}
.dialog-footer{
  text-align: center;
  padding-bottom: 30px;
  .el-button{
    width: 75%;
    margin-bottom: 20px;
  }
  .el-button+.el-button{
    margin-left: 0;
  }
}
</style>